<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="btns">
        <button>国家事实</button>
        <button>科技兴国</button>
    </div>
    <div id="content">
        <!-- <ul>
            <li>序号：</li>
            <li>标题：</li>
            <li>封面图：</li>
            <li>作者：</li>
            <li>分类：</li>
        </ul> -->
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.2/jquery.js"></script>
<!-- ajax请求：现在web开发，一般都是前后分离的 -->
<!-- 前端发送ajax请求，获取数据，然后在把数据dom操作放置在页面上 -->
<script>
    $('.btns button').click(function (e) {
        /* 希望点击的时候，可以发送网络请求，将接口的数据拿到 */
        // console.log(e.target, e.target.innerHTML);
        let typeName = $(this).html();
        const API_URL = 'https://yw.52kfw.cn/api/news/flist?pageSize=100&cate_id=' + typeName;

        // 发送ajax请求
        $.ajax({
            url: API_URL,
            dataType: 'json',
            success: function (response) {
                console.log(response);
                /* 是从响应数据里面解构 状态码和对象数组数据 */
                /* 多层解构，只要包装等号左右两侧的结构一致即可 */
                let { statusCode, data: { list } } = response;
                /* 等价:
                    let statusCode = response.statusCode;
                    let data = response.data;
                    let list = response.data.list;

                */


                if (statusCode == 200) {
                    let html = '';
                    for (let i = 0; i < list.length; i++) {
                        let item = list[i];
                        // 在javascript里面字符串拼接的时候不能换行，如果要换行，则需要使用 \ 续行符
                        html += `<ul> 
                                    <li>序号：${item._id}</li>
                                    <li>标题：${item.title}</li>                                        
                                    <li>封面图：<img width="100" src="${'http://jy.52kfw.cn' + item.imageUrl}"></li>                                        
                                    <li>作者：${item.author}</li>                                        
                                    <li>分类：${item.cate_id}</li>                                    
                                </ul>`;
                    }

                    $("#content").html(html);


                } else {
                    alert('系统繁忙！');
                }

            }
        })



    })

</script>

</html>